<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奶茶点单</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body class="red">
    <div class="page-bg"></div>
    <main>
        <section class="bg">
            <img class="red-bg active" src="./images/red-bg.png" />
            <img class="yellow-bg right" src="./images/yellow-bg.png" />
            <img class="green-bg left" src="./images/green-bg.png" />
        </section>
        <section class="cup">
            <img class="red-cup active" src="./images/red.png" />
            <img class="yellow-cup right" src="./images/yellow.png" />
            <img class="green-cup left" src="./images/green.png" />
        </section>
        <section class="content">
            <form>
                <article class="red-content active">
                    <h1>长安的荔枝</h1>
                    <p>长安的荔枝 | HPP低温锁鲜</p>
                    <div class="temp">
                        <span>温度</span>
                        <input id="temp-hot-red" type="radio" name="temp-red" value="0" />
                        <label for="temp-hot-red">热</label>
                        <input id="temp-cold-red" type="radio" name="temp-red" value="1" />
                        <label for="temp-cold-red">冰</label>
                    </div>
                    <div class="sugar">
                        <span>糖度</span>
                        <input id="sugar-red-0" type="radio" name="sugar-red" value="0" />
                        <label for="sugar-red-0">标准甜</label>
                        <input id="sugar-red-1" type="radio" name="sugar-red" value="1" />
                        <label for="sugar-red-1">少少甜</label>
                        <input id="sugar-red-2" type="radio" name="sugar-red" value="2" />
                        <label for="sugar-red-2">不加糖</label>
                    </div>
                </article>
                <article class="yellow-content right">
                    <h1>轻咖柠檬茶</h1>
                    <p>半颗柠檬看得见 | 超大杯超级解暑</p>
                    <div class="temp">
                        <span>温度</span>
                        <input id="temp-hot-yellow" type="radio" name="temp-yellow" value="0" />
                        <label for="temp-hot-yellow">热</label>
                        <input id="temp-cold-yellow" type="radio" name="temp-yellow" value="1" />
                        <label for="temp-cold-yellow">冰</label>
                    </div>
                    <div class="sugar">
                        <span>糖度</span>
                        <input id="sugar-yellow-0" type="radio" name="sugar-yellow" value="0" />
                        <label for="sugar-yellow-0">标准甜</label>
                        <input id="sugar-yellow-1" type="radio" name="sugar-yellow" value="1" />
                        <label for="sugar-yellow-1">少少甜</label>
                        <input id="sugar-yellow-2" type="radio" name="sugar-yellow" value="2" />
                        <label for="sugar-yellow-2">不加糖</label>
                    </div>
                </article>
                <article class="green-content left">
                    <h1>羽衣轻体果蔬插</h1>
                    <p>配方干净安心喝 | 放心检测放心喝</p>
                    <div class="temp">
                        <span>温度</span>
                        <input id="temp-hot-green" type="radio" name="temp-green" value="0" />
                        <label for="temp-hot-green">热</label>
                        <input id="temp-cold-green" type="radio" name="temp-green" value="1" />
                        <label for="temp-cold-green">冰</label>
                    </div>
                    <div class="sugar">
                        <span>糖度</span>
                        <input id="sugar-green-0" type="radio" name="sugar-green" value="0" />
                        <label for="sugar-green-0">标准甜</label>
                        <input id="sugar-green-1" type="radio" name="sugar-green" value="1" />
                        <label for="sugar-green-1">少少甜</label>
                        <input id="sugar-green-2" type="radio" name="sugar-green" value="2" />
                        <label for="sugar-green-2">不加糖</label>
                    </div>
                </article>
                <button class="buy-now">立即购买</button>
            </form>
        </section>
    </main>

    <script src="./script.js"></script>
</body>

</html>